<template>
  <div class="box">
    <div>
      <!-- <div class="container"/> -->
      <svg 
        width="50%" 
        height="200" 
        viewBox="0 0 100 100" 
        preserveAspectRatio="none">
        <!-- 定义线性渐变 -->
        <defs>
          <linearGradient 
            id="grad1" 
            x1="0%" 
            y1="0%" 
            x2="100%" 
            y2="0%">
            <stop 
              offset="40%" 
              style="stop-color:#e611df;stop-opacity:1" />
            <stop 
              offset="40%" 
              style="stop-color:yellow;stop-opacity:1" />
          </linearGradient>
        </defs>
        <!-- 使用渐变填充的多边形 -->
        <polygon 
          points="100,100 60,75 40,75 0,100 0,50 40,25 60,25 100,50"
          fill="url(#grad1)" />
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  layout: 'staticPage',
  data() {
    return {
      shapes: [
        { id: 1, pos: 112, type: 'circle', name: 'Circle One' },
        { id: 1, pos: 800, type: 'star', name: 'Circle One' },
        { id: 1, pos: 620, type: 'diamond', name: 'Circle One' },
        { id: 1, pos: 500, type: 'rectangle', name: 'Circle One' }
        // 可以添加更多形状
      ],
      totalLength: 1500
    }
  },
  computed: {
    rectangles() {
      return this.shapes.filter(shape => shape.type === 'rectangle')
    },
    diamonds() {
      return this.shapes.filter(shape => shape.type === 'diamond')
    },
    stars() {
      return this.shapes.filter(shape => shape.type === 'star')
    },
    circle() {
      return this.shapes.filter(shape => shape.type === 'circle')
    }
  },
  mounted() {
    // this.drawWave('waveCanvas')
  },
  methods: {
    handleShapeClick(shape) {
      console.log(shape)
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100vh;
  background: #001f6b;
  color: #ffffff;
  padding: 30px 20px;
  overflow: hidden;
}
.container {
  height: 200px;
  width: 50vw;
  background: #fff;
  // background: linear-gradient(
  //   to right,
  //   #e611df 0%,
  //   #e611df 60%,
  //   yellow 60%,
  //   yellow 100%
  // );
  clip-path: polygon(
    100% 100%,
    60% 75%,
    40% 75%,
    0% 100%,
    0% 50%,
    40% 25%,
    60% 25%,
    100% 50%
  );
}
</style>
